<template>
  <div>
    <el-card>
      <typeNav @getCategoryList="getCategoryList" ref="typeNav"></typeNav>
    </el-card>
    <el-card class="margin">
      <div v-show="scene == 0">
        <el-button
          icon="el-icon-plus"
          type="primary"
          class="margin"
          :disabled="!category3Id"
          @click="addSpu"
          >添加SPU</el-button
        >
        <el-table border :data="spuList">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="spu名称" prop="spuName"></el-table-column>
          <el-table-column label="spu描述" prop="description"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="{ row }">
              <el-button
                type="success"
                icon="el-icon-plus"
                size="mini"
                title="添加sku"
                @click="addSku(row)"
              ></el-button>
              <el-button
                type="warning"
                icon="el-icon-edit"
                size="mini"
                title="修改spu"
                @click="editSku(row)"
              ></el-button>
              <el-button
                type="info"
                icon="el-icon-info"
                size="mini"
                title="查看当前spu全部sku列表"
                @click="handle(row)"
              ></el-button>
              <el-popconfirm
                title="这是一段内容确定删除吗？"
                @onConfirm="delSpu(row)"
              >
                <el-button
                  style="margin-left: 10px"
                  type="danger"
                  icon="el-icon-delete"
                  size="mini"
                  title="删除spu"
                  slot="reference"
                ></el-button>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="text-align: center"
          class="margin"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[3, 5, 7, 9]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
      <spuForm @cancel="cancel" v-show="scene == 1" ref="spuRef"></spuForm>
      <skuForm @cancel="cancel" v-show="scene == 2" ref="skuRef"></skuForm>
    </el-card>
    <!-- 查看 sku 弹出层 -->
    <el-dialog
      :title="`${spu.spuName}的sku列表`"
      :visible.sync="dialogTableVisible"
      @close="dialogClosed"
    >
      <el-table :data="skuList" v-loading="loading">
        <el-table-column label="名称" prop="skuName"> </el-table-column>
        <el-table-column label="价格" prop="price"></el-table-column>
        <el-table-column label="重量" prop="weight"></el-table-column>
        <el-table-column label="默认图片">
          <template slot-scope="{ row }">
            <div style="width: 120px; height: 120px">
              <img
                style="width: 120px; height: 120px border-radius: 8px;"
                :src="row.skuDefaultImg"
                alt=""
              />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import skuForm from "./SkuForm";
import spuForm from "./SpuForm";
export default {
  data() {
    return {
      spuList: [],
      category3Id: 0,
      total: 0,
      page: 1,
      limit: 3,
      scene: 0,
      categoryIdList: {},
      dialogTableVisible: false,
      spu: {},
      skuList: [],
      loading: true,
    };
  },
  components: {
    skuForm,
    spuForm,
  },
  created() {
    this.getCategoryList();
  },
  methods: {
    async getCategoryList(list, categoryId) {
      try {
        this.category3Id = categoryId.category3Id;
        this.categoryIdList = categoryId;
      } catch (error) {}
      if (this.category3Id) {
        this.getSpuList();
      }
    },
    async getSpuList() {
      let { page, limit, category3Id } = this;
      const res = await this.$Api.spu.reqGetSpuList(page, limit, category3Id);
      this.spuList = res.data.records;
      this.total = res.data.total;
    },
    // 每次显示多少条数据
    handleSizeChange(newlimit) {
      this.limit = newlimit;
      this.getSpuList();
    },
    // 页码切换
    handleCurrentChange(newpage) {
      this.page = newpage;
      this.getSpuList();
    },
    editSku(row) {
      this.scene = 1;
      this.$refs.spuRef.getSpuInfo(row.id);
      this.$refs.spuRef.getTradeMarkList();
      this.$refs.spuRef.getSpuImg(row.id);
      this.$refs.spuRef.getSaleAttrList();
      this.$refs.typeNav.disabled = true;
    },
    cancel(scene, flag) {
      if (flag == "修改") {
        this.getSpuList(this.page);
      } else {
        this.getSpuList();
      }
      this.scene = scene;
      this.$refs.typeNav.disabled = false;
    },
    addSpu() {
      this.scene = 1;
      this.$refs.spuRef.spuInfo.spuSaleAttrList = [];
      this.$refs.spuRef.getTradeMarkList(this.category3Id);
      this.$refs.spuRef.getSaleAttrList();
    },
    async delSpu(row) {
      const res = await this.$Api.spu.reqDeleteSpu(row.id);
      if (res.code == 200) {
        this.$message.success("删除成功!");
        this.getSpuList(this.spuList.length > 1 ? this.page : this.page - 1);
      } else {
        return this.$message.error("删除失败!");
      }
    },
    addSku(row) {
      this.scene = 2;
      this.$refs.skuRef.getData(row, this.categoryIdList);
      this.$refs.typeNav.disabled = true;
    },
    async handle(spu) {
      this.dialogTableVisible = true;
      this.spu = spu;
      const res = await this.$Api.spu.reqGetSkuList(spu.id);
      if (res.code == 200) {
        this.skuList = res.data;
        this.loading = false;
      }
    },
    dialogClosed() {
      this.loading = true;
      this.skuList = [];
    },
  },
};
</script>

<style></style>
